<template>
  <div class="expertInfo_body">
    <div class="expertInfo_body_header">
      <img class="head_img" v-if="expertInfo.image" :src="'https://gzccc.chlitchi.com:1433/dev-api'+expertInfo.image" alt />
      <img class="head_img" v-else-if="expertInfo.blob_data" :src="expertInfo.blob_data" alt />
      <img class="head_img" v-else src="../../../../static/image/default.png" alt />
    </div>
    <div class="expertInfo_body_info">
      <div>
        <span>姓名：</span>
        {{ expertInfo.title }}
      </div>
      <div>
        <span>主要研究：</span>
        {{ expertInfo.major }}
      </div>
      <div>
        <span>个人简介：</span>
      </div>
      <!-- <div class="expertInfo_body_dec">{{ expertInfo.content }}</div> -->
      <div class="expertInfo_body_dec" v-html="expertInfo.content"></div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      expertInfo: []
    };
  },
  methods: {
    formatRichText(html) {
      let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
        match = match
          .replace(/style="[^"]+"/gi, "")
          .replace(/style='[^']+'/gi, "");
        match = match
          .replace(/width="[^"]+"/gi, "")
          .replace(/width='[^']+'/gi, "");
        match = match
          .replace(/height="[^"]+"/gi, "")
          .replace(/height='[^']+'/gi, "");
        return match;
      });
      newContent = newContent.replace(/style="[^"]+"/gi, function(
        match,
        capture
      ) {
        match = match
          .replace(/width:[^;]+;/gi, "width:100%;")
          .replace(/width:[^;]+;/gi, "width:100%;");
        return match;
      });
      newContent = newContent.replace(/<br[^>]*\/>/gi, "");
      newContent = newContent.replace(
        /\<img/gi,
        '<img style="width:100%;height:auto;display:block;margin:10px 0;"'
      );
      return newContent;
    }
  },
  mounted() {
    this.$axios.get("api/expert/" + this.$route.query.id).then(data => {
      if (data.data.data.content) {
        data.data.data.content = data.data.data.content.replace(/%/g, "%25");
        data.data.data.content = this.formatRichText(
          decodeURIComponent(data.data.data.content)
        );
      }
      if (data.data.data.blob_data) {
        data.data.data.blob_data='data:image/jpeg;base64,'+data.data.data.blob_data
      }
      this.expertInfo = data.data.data;
    });
  }
};
</script>

<style scoped>
.expertInfo_body {
  width: 100% !important;
  /* max-width: 1000px; */
  margin: 0 auto;
  padding: 10px;
}
.expertInfo_body_header {
  height: 300px;
  width: 250px;
  margin: 0 auto;
}
.expertInfo_body_header img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  border: 1px solid #e0e0e0;
}
.expertInfo_body_info {
  margin-top: 10px;
}
.expertInfo_body_info span {
  font-weight: bold;
}
.expertInfo_body_dec {
  text-indent: 2em;
  width: 100%;
}
</style>
